<template>
  <el-container>
    <el-main>
      <div class="button-group">
        <el-button 
          v-for="i in 10" 
          :key="i"
          type="primary"
          @click="fetchData(i)"
        >
          {{ ['用户信息', '公司信息', '营业额', '订单信息', '图片信息', '位置信息', '数据信息', '统计信息', '选项信息', '其他信息'][i-1] }}
        </el-button>
        <!-- 红色按钮 -->
        <el-button type="" @click="showAPIFile">显示api文档</el-button>
      </div>

      <el-loading :loading="loading">
        <el-card v-if="responseData && Object.keys(responseData).length > 0">
          <pre>{{ JSON.stringify(responseData) }}</pre>
        </el-card>
      </el-loading>

      <el-alert
        v-if="error"
        :title="error"
        type="error"
        show-icon
        closable
      />
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import { 
  fetchUserInfo, 
  fetchCompanyInfo, 
  fetchRevenue,
  fetchOrderInfo,
  fetchImageInfo,
  fetchLocationInfo,
  fetchDataInfo,
  fetchStatistics,
  fetchOptionInfo,
  fetchOtherInfo
} from '../api/request'

const loading = ref(false)
const responseData = ref(null)
const error = ref(null)

const showAPIFile = () => {
  window.open('http://localhost:4000/api-docs', '_blank')
}

const fetchData = async (index) => {
  try {
    loading.value = true
    let res = null
    
    switch (index) {
      case 1:
        res = await fetchUserInfo()  // 用户信息
        break
      case 2:
        res = await fetchCompanyInfo()  // 公司信息
        break
      case 3:
        res = await fetchRevenue()  // 营业额
        break
      case 4:
        res = await fetchOrderInfo()  // 订单信息
        break
      case 5:
        res = await fetchImageInfo()  // 图片信息
        break
      case 6:
        res = await fetchLocationInfo()  // 位置信息
        break
      case 7:
        res = await fetchDataInfo()  // 数据信息
        break
      case 8:
        res = await fetchStatistics()  // 统计信息
        break
      case 9:
        res = await fetchOptionInfo()  // 选项信息
        break
      case 10:
        res = await fetchOtherInfo()  // 其他信息
        break
      default:
        res = await fetchUserInfo()
        break
    }
    responseData.value =""
  
    if(res.code==200){
      responseData.value = JSON.stringify(res.data) || res  // 如果res.data不存在，直接使用res
    console.log(responseData.value)
    ElMessage.success('请求成功：' + JSON.stringify(responseData.value, null, 2))
    }else{
      ElMessage.error('请求失败：' + res.msg)
    }
    
  } catch (err) {
    error.value = err.message
    ElMessage.error('请求失败：' + err.message)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.button-group {
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
</style>